<template>
	<div class="app-container">
	 <el-tabs v-model="activeName" @tab-click="handleClick">
	   <el-tab-pane label="用户管理" name="first">
	    	<el-collapse v-model="activeNames" @change="handleChange">
			  <el-collapse-item title="卡号信息" name="1">
			  <el-row><el-col :span='6'>ICCID:{{iccid}}</el-col><el-col :span='6'>MSISDN:{{msisdn}}</el-col><el-col :span='6'>IMSI:{{imsi}}</el-col><el-col :span='6'>IMEI:{{imei}}</el-col></el-row>
			  </el-collapse-item>
			  <el-collapse-item title="卡信息状态" name="2">
			     <el-row><el-col :span='8'>物联卡状态:{{cardStatus}}</el-col><el-col :span='8'>设备开关机状态:   无</el-col></el-row>
			  </el-collapse-item>
			  
			  <el-collapse-item title="已订购套餐" name="4">
			    <el-table
			      :data="tableData"
			      style="width: 100%">
			      <el-table-column
			        prop="pricingName"
			        label="套餐名称"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="effectTime"
			        label="生效时间"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="expiryTime"
			        label="失效时间">
			      </el-table-column>
			    </el-table>
			  </el-collapse-item>
			  
			  <el-collapse-item title="通讯状态" name="3">
			      <el-row><el-col :span='8'>APN:    无</el-col><el-col :span='8'>工作状态:   无</el-col><el-col :span='8'>接入类型: 无</el-col><el-col :span='8'>IP地址:   无</el-col><el-col :span='8'>上次同步时间: {{lastUpdateTime}}</el-col></el-row>
			  </el-collapse-item>
			</el-collapse>
	    </el-tab-pane>
	    
	    <el-tab-pane label="流量使用月趋势" name="second">
	 		 <el-card class="box-card" :class='isShow' >
	    		<el-row>
	    			<el-col :span='8'>
	    				 	<span class="demonstration">选择月份</span>
						    <el-date-picker
						      v-model="valueMonth"
						      type="month"
						      placeholder="选择月">
						    </el-date-picker>
	    			</el-col>
	    		</el-row>
				<div slot="header" class="clearfix">
					<span>本月GPRS流量</span>
				</div>
				<line-chart :chart-data="lineChartData" :valueMonth='valueMonth' :iccid='this.$route.params.id' :chooseoneSend='chooseone' />
			</el-card>
	    </el-tab-pane>
	   
	  </el-tabs>
	 </div>
</template>

<script>
	import { getCardInfo,getCardFlowUsed } from "@/api/system/info";
	import LineChart from '../../dashboard/LineChart'
	const lineChartData = {
		  newVisitis: {
		    expectedData: [100, 120, 161, 134, 105, 160, 165],
		    actualData: [120, 82, 91, 154, 162, 140, 145]
		  },
		}
	 export default {
    data() {
      return {
        activeName: 'first',   //table
        activeNames: ['1'],     //折叠面板
        valueMonth:new Date(),
        tableData: [],
        chooseone:'first',
          msisdn:'',
          iccid:'',
          imsi:'',
          imei:'',
          lastUpdateTime:'',    //上次同步时间
          cardStatus:'',
          lineChartData: lineChartData.newVisitis,
          isShow:true
      };
    },
    components:{
    	LineChart
    },
    created(){
    	var cardId = this.$route.params.id;
    	getCardInfo(cardId).then((res)=>{
				console.log(res);
				this.msisdn = res.data.cardInfo.msisdn;
				this.iccid = res.data.cardInfo.iccid;
				this.imsi = res.data.cardInfo.imsi;
				this.imei = res.data.cardInfo.imei;
				this.lastUpdateTime = res.data.cardInfo.lastUpdateTime;
//				this.activationTime = res.data.activationTime;   //激活时间
//				this.flowTotal = (res.data.flowTotal/1024).toFixed(2);   //当月总流量
//				this.flowLeft = (res.data.flowLeft/1024).toFixed(2);   //剩余流量
//				this.onOffStatus = res.data.onOffStatus=='1'?'开机':'关机';   //开关机状态
				this.cardStatus =this.cardStatusFilter(res.data.cardInfo.status);
				this.tableData = res.data.packageList;
			})
    },
    methods: {
      changeBusiness(tab, event) {  //切换运营商
        console.log(tab.name);
      },
      handleClick(tab, event) {
        this.chooseone = tab.name;
      },
      handleChange(val) {  //折叠面板
        console.log(val);
      },
       cardStatusFilter(a){
    	var cardStatueStr = '';
    	if(a=='0'){
    		cardStatueStr = '其他'
    	}else if(a=='1'){
    		cardStatueStr = '待激活'
    	}else if(a=='2'){
    		cardStatueStr = '沉默期'
    	}else if(a=='3'){
    		cardStatueStr = '测试期'
    	}else if(a=='4'){
    		cardStatueStr = '正常'
    	}else if(a=='5'){
    		cardStatueStr = '停机'
    	}else if(a=='6'){
    		cardStatueStr = '已销号'
    	}
    	return cardStatueStr;
    },
    choose(a){
    	console.log(a);
    	if(a=='1'){
    		this.isShow =  true;
    	}else{
    		this.isShow =  false;
    	}
    }
    }
  };
</script>

<style scoped="scoped" lang="sass">
	
</style>